"use client";

import { useState } from "react";
import { Panel } from "@agent-society/ui";

interface Props {
  onLaunch?: (config: ExperimentConfig) => Promise<void> | void;
}

export interface ExperimentConfig {
  cohortA: string;
  cohortB: string;
  durationHours: number;
  notes?: string;
}

const COHORT_OPTIONS = [
  { id: "space_limited", label: "Space-limited agents" },
  { id: "time_limited", label: "Time-limited agents" },
  { id: "fusion_enabled", label: "Fusion-enabled coalition" }
];

export function ExperimentLab({ onLaunch }: Props) {
  const [config, setConfig] = useState<ExperimentConfig>({ cohortA: "space_limited", cohortB: "time_limited", durationHours: 12 });
  const [status, setStatus] = useState<string>("");

  async function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
    event.preventDefault();
    setStatus("Launching experiment...");
    try {
      await onLaunch?.(config);
      setStatus("Experiment scheduled (placeholder – orchestration pending).");
    } catch (error) {
      setStatus("Failed to launch experiment.");
      console.error(error);
    }
  }

  return (
    <Panel title="Experiment Lab" description="Configure and monitor scenario tests">
      <form onSubmit={handleSubmit} className="space-y-4 text-sm text-slate-200">
        <div className="grid gap-3 sm:grid-cols-2">
          <Field label="Cohort A">
            <select
              value={config.cohortA}
              onChange={event => setConfig(prev => ({ ...prev, cohortA: event.target.value }))}
              className="w-full rounded-lg border border-slate-700/50 bg-slate-900/70 px-3 py-2 outline-none focus:border-sky-500"
            >
              {COHORT_OPTIONS.map(option => (
                <option key={option.id} value={option.id}>
                  {option.label}
                </option>
              ))}
            </select>
          </Field>
          <Field label="Cohort B">
            <select
              value={config.cohortB}
              onChange={event => setConfig(prev => ({ ...prev, cohortB: event.target.value }))}
              className="w-full rounded-lg border border-slate-700/50 bg-slate-900/70 px-3 py-2 outline-none focus:border-sky-500"
            >
              {COHORT_OPTIONS.map(option => (
                <option key={option.id} value={option.id}>
                  {option.label}
                </option>
              ))}
            </select>
          </Field>
          <Field label="Duration (hours)">
            <input
              type="number"
              min={1}
              value={config.durationHours}
              onChange={event => setConfig(prev => ({ ...prev, durationHours: Number(event.target.value) }))}
              className="w-full rounded-lg border border-slate-700/50 bg-slate-900/70 px-3 py-2 outline-none focus:border-sky-500"
            />
          </Field>
          <Field label="Notes">
            <textarea
              value={config.notes ?? ""}
              onChange={event => setConfig(prev => ({ ...prev, notes: event.target.value }))}
              rows={2}
              className="w-full rounded-lg border border-slate-700/50 bg-slate-900/70 px-3 py-2 outline-none focus:border-sky-500"
            />
          </Field>
        </div>
        <button
          type="submit"
          className="rounded-lg bg-sky-600 px-4 py-2 font-semibold text-white transition hover:bg-sky-500"
        >
          Launch Experiment
        </button>
        {status && <p className="text-xs text-slate-400">{status}</p>}
      </form>
    </Panel>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="space-y-1">
      <span className="block text-xs uppercase tracking-wide text-slate-400">{label}</span>
      {children}
    </label>
  );
}
